<!-- 数据、方法绑定 -->
<script>
  import svelteLogo from "../assets/svelte.svg";
  import src from "../assets/vite.svg";

  // let count = $state(0);
  // const increment = () => {
  //   count += 1;
  // };

  let todos = [
    {
      done: false,
      text: "张三",
    },
  ];

  const todeAdd = () => {
    let obj = {
      done: false,
      text: "李四",
    };
    todos = [...todos, obj];
    console.log(todos);
  };

  // let name = "你好";

  // setTimeout(() => {
  //   name = "hello";
  // }, 1000);

  // import { writable } from 'svelte/store';

  // let count = writable(0);

  //  // 更新 store
  //  setTimeout(() => {
  //   count.set(1); // 使用 set 更新 store
  // }, 2000);
  // let a =1;
  // let b = 2;
</script>

<!-- <h1>{name}</h1> -->

<!-- <p>Count: {$count}</p> -->

<!-- <h1>{a}+{b}={a+b}</h1>
<img src={svelteLogo} class="logo" alt="Vite Logo" />
<img {src} class="logo" alt="Vite Logo" /><br /> -->

<!-- <button onclick={increment}>
  count is {count}
</button> -->

<div>
  {#each todos as todo}
    <p>{todo.text}</p>
  {/each}
</div>

<button class="btn" onclick={todeAdd}>添加一人</button>

<br />
<br />

<style>
  .btn {
    background-color: rgba(0, 81, 255);
    color: #ffffff;
  }
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
</style>
